<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>DEMO表单弹窗</title>
<meta name="Description" content="DEMO弹窗操作" />
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="../../../res/weadmin_2.26/static/css/font.css">
<link rel="stylesheet" href="../../../res/weadmin_2.26/static/css/weadmin.css">

<style>
	.layui-form select{
		display: block; 
	}
	.layui-unselect {
		display: none;
	}
	
</style>

</head>

<body>

	<div class="weadmin-body">
		窗口内容.
		
		<form id="addform" class="layui-form layui-col-md12 " lay-filter="addformFilter"  >
			
		<div class="layui-col-lg7 layui-form-item ">
          <label class="layui-form-label">属性1:</label>
          <div class="layui-input-block">
          	<input type="text" name="prop1" value=""  placeholder="属性1" lay-verify="required|nikename" v-bind:value="prop1" class="layui-input">
          </div>
        </div>

        <div class="layui-col-lg7 layui-form-item ">
          <label class="layui-form-label">属性2:</label>
          <div class="layui-input-block">
          	<input type="text" name="prop2" value=""  placeholder="属性2" lay-verify="required" v-bind:value="prop2" class="layui-input">
          </div>
        </div>

        <div class="layui-col-lg7 layui-form-item ">
          <label class="layui-form-label">属性3:</label>
          <div class="layui-input-block">
          	<input type="text" name="prop3" value=""  placeholder="属性3" lay-verify="required" v-bind:value="prop3" class="layui-input">
          </div>
        </div>

        <div class="layui-col-lg7 layui-form-item ">
          <label class="layui-form-label">固定select:</label>
          <div class="layui-input-block">
          	<select name="staticSelect" lay-verify="required" >
          		<option value="static1" >固定值1</option>
          		<option value="static2" >固定值2</option>
          		<option value="static3" >固定值3</option>
          		<option value="static4" >固定值4</option>
          	</select>
          </div>
        </div>

        <div class="layui-col-lg7 layui-form-item ">
          <label class="layui-form-label">动态select: 
          	<button type="button" v-on:click="addform_dynamicSelect_toAdd()" >++</button> &nbsp; <button type="button" v-on:click="addform_dynamicSelect_doDel(0)" >--</button> &nbsp; 
          </label>
          <div class="layui-input-block">
          	<select name="dynamicSelect" lay-verify="required" class="layui-input" >
          		<option v-for="(tmpData , tmp_idx) in dynamicSelect " v-bind:value="tmpData.key" >{{tmpData.value}}</option>
          	</select>
          </div>
        </div>

        <div class="layui-col-lg7 layui-form-item ">
          <label class="layui-form-label">动态ele:  <button type="button" v-on:click="addform_dynamicSelect_toAdd()" >++ </button> </label>
          <div class="layui-input-block">
          	<div v-for="(tmpData , tmp_idx) in dynamicSelect " v-bind:value="tmpData.key"   > {{tmpData.value}} <button type="button" v-on:click="addform_dynamicSelect_doDel(tmp_idx)" > X </button> <br/>  </div>
          </div>
        </div>

        <div class="layui-col-lg7 layui-form-item ">
          <label class="layui-form-label">动态radio: </label>
          <div class="layui-input-block">
          	<div v-for="(tmpData , tmp_idx) in dynamicSelect " v-bind:value="tmpData.key"   > aa <input type="radio" v-bind:value="tmpData.key" />  {{tmpData.value}} <input type="button" v-on:click="addform_dynamicSelect_doDel(tmp_idx)" > X </button> <br/>  </div>
          </div>
        </div>
        
         <div class="layui-col-lg7 layui-form-item ">
          <label class="layui-form-label">时间: 
          </label>
          <div class="layui-input-block">
          	<input type="text" id="addform_timeStart" placeholder="选择时间" readonly="readonly" v-bind:value="timeStart" v-model="timeStart"  class="layui-laydate layui-input " />
          </div>
        </div>

			<button class="layui-btn" type="button"  lay-submit=""  lay-filter="addformFilter"   > 提交表单 </button>
		</form>

		<button type="button" onclick="getValueAndClose()" class="layui-btn" > 获取值并关闭窗口 </button>
		<button type="button" onclick="addform_getFormData()" class="layui-btn" > 获取表单数据 </button>
	</div>
</body>

<script type="text/javascript" src="//cdn.staticfile.org/js-cookie/2.2.0/js.cookie.js" charset="utf-8"></script>
<script type="text/javascript" src="//cdn.staticfile.org/jquery/1.12.4/jquery.js" charset="utf-8"></script>
<script type="text/javascript" src="//cdn.staticfile.org/vue/2.5.16/vue.js" charset="utf-8"></script>

<!-- 
	<script type="text/javascript" src="//cdn.staticfile.org/layer/2.3/layer.js" charset="utf-8"></script>
-->
<script type="text/javascript" src="../../../res/js/layui_jq_util.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../res/weadmin_2.26/lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../sysmgr/cfg/env_cfg.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../sysmgr/tplt_dft/adm_mgr/js/adm_power_util.js" charset="utf-8"></script>


<script type="text/javascript" charset="utf-8">
	
	// layui工具类
	var layuiJqUtil = new LayuiJqUtil();
	// 页面请求参数
   var paramObj = layuiJqUtil.getUrlParamObj();
  // 窗口初始化对象
	var chooseWinInit = layuiJqUtil.layerChooseWinInit();
	
	chooseWinInit.parentLayer.msg("收到页面请求参数:" + JSON.stringify(paramObj));
	
//	layuiJqUtil.layerChooseWinRtdataAndClose({},chooseWinInit); // 返回数据并关闭窗口

// ///////////////////////////////////////////////////// 
	// 获取窗口值并关闭弹窗口 TODO 
	function getValueAndClose(){
		var dataVal = {
			paramA:"valueA",
			paramB:123,
			paramC:"valueC"
		};
		layuiJqUtil.layerChooseWinRtdataAndClose(dataVal,chooseWinInit); // 返回数据并关闭窗口
	}

	// layui 初始化 
	layui.config({
	  base: '../../../res/weadmin_2.26/static/js/'
	  ,version: '101100'
	});
	
	layui.use(['jquery','form','laydate','table'], function() {
		var $ = layui.jquery ; 
		var form = layui.form ; 
		var laydate = layui.laydate ; 
		var table = layui.table ; 
		
		// 表单插件初始化
	  	var qform_timeStart = laydate.render({
			elem: "#addform_timeStart" ,
			format : "yyyy/MM/dd HH:mm:ss"
		});

		form.on("submit(addformFilter)",function(filterData){
			console.info(filterData);
			chooseWinInit.parentLayer.alert("表单提交了.")
		});
	});

	// vueData 
	var addform_vueData = {
		prop1 : "value1",
		prop2 : "value2",
		prop3 : "value3",
		timeStart:"",
		dynamicSelect : [
			{key :"dynamic1",value:"dynamicShow1"},
			{key :"dynamic2",value:"dynamicShow2"},
			{key :"dynamic2",value:"dynamicShow3"}
		]
	};

	// vue的App
	var addform_vueApp = new Vue({
	el:"#addform",
	data:addform_vueData ,
	methods:{
			addform_dynamicSelect_toAdd : function(){
				var tmpObjAry = this.$data.dynamicSelect ;
				if(!tmpObjAry){
					tmpObjAry = this.$data.dynamicSelect = [];
				}
				var tgtIdx = tmpObjAry.length ;
				var randVal = Math.random();
				var tgtObj = {
					key:"" + randVal,
					value: "" + randVal 
					// subArray:[],
				} ;
			
				this.$set(tmpObjAry,tgtIdx,tgtObj);
				console.info(tmpObjAry);
			},
			addform_dynamicSelect_doDel : function(idx){
				this.$delete(this.$data.dynamicSelect,idx);
				console.debug(this.$data.dynamicSelect );
			}
		}
	});
	
	
	// TODO  , 未完成内容: radio , checkbox , lay-from 的select ,  富文本 

	var addform_getFormData = function(){
		var formData = addform_vueData ;
		chooseWinInit.parentLayer.alert(JSON.stringify(formData)); 
		
	}

</script>

</html>